<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">

<head>
  <meta content="origin" name="referrer">
  <title>highlight subgraph</title>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.behaviour.analysis.js"></script>
  <script src="../build/plugin.tool.highlightSubgraph.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>
</head>
<body>
  <div id='mountNode'></div>
  <script>
    const Highlighter = G6.Plugins['tool.highlightSubgraph'];
    const highlighter = new Highlighter();
    const data = {
      nodes: [{
        id: 'node1',
        x: 100,
        y: 200
      }, {
        id: 'node2',
        x: 300,
        y: 200
      }, {
        id: 'node3',
        x: 100,
        y: 100
      }, {
        id: 'node4',
        x: 300,
        y: 100
      }],
      edges: [{
        target: 'node2',
        source: 'node1'
      }, {
        target: 'node3',
        source: 'node2'
      }, {
        target: 'node4',
        source: 'node3'
      }, {
        target: 'node1',
        source: 'node4'
      }, ]
    };
    const graph = new G6.Graph({
      id: 'mountNode', // dom id
      plugins: [highlighter],
      height: 1000,
    });
    graph.read(data);
    const nodes = graph.getNodes();
    const edges = graph.getEdges();
    const reNodes = [nodes[0], nodes[1]];
    const reEdges = [edges[0]];
    graph.highlightSubgraph(reNodes.concat(reEdges));

  </script>
</body>
